<template>
  <!-- 系统课 页面 -->
  <div class="openClass_box">
    <!-- navbar -->
    <OpenclassTitleNavbar />
    <!-- 主体列表 -->
    <div class="content_box">
      <!-- 内容列表 -->
      <OpenclassList />
    </div>
  </div>
  <!-- 筛选弹出框 -->
  <van-popup
    v-model:show="show"
    position="right"
    :style="{ height: '100%', width: '80% ' }"
  >
    <div class="popup_content">
      <!-- 科目 -->
      <div class="subject_box">
        <div class="title">科目</div>
        <div class="list">
          <div
            :class="subjectIndex == item ? 'active' : 'item'"
            v-for="item in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]"
            :key="item"
            @click="handleActive(item, 'subject')"
          >
            <p>科ddd目{{ item }}</p>
          </div>
        </div>
      </div>
      <!-- 价格 -->
      <div class="price_box">
        <div class="title">价格</div>
        <div class="list">
          <div
            :class="priceIndex == item ? 'active' : 'item'"
            v-for="item in [0, 1, 2]"
            :key="item"
            @click="handleActive(item, 'price')"
          >
            价格{{ item }}
          </div>
        </div>
      </div>
      <!-- 底部按钮 -->
      <div class="button_box">
        <div class="left">重置</div>
        <div class="right">确定</div>
      </div>
    </div>
  </van-popup>
</template>

<script>
import OpenclassTitleNavbar from "./component/OpenclassTitleNavbar.vue";
import OpenclassList from "./component/OpenclassList.vue";
import { provide, ref } from "@vue/runtime-core";

export default {
  components: { OpenclassTitleNavbar, OpenclassList },
  setup() {
    // 弹出框状态
    const show = ref(false);
    // 弹出框控制
    const showPopup = () => {
      show.value = true;
    };
    // 选择类型
    // 科目索引
    const subjectIndex = ref(0);
    // 价格索引
    const priceIndex = ref(0);
    const handleActive = (index, sort) => {
      //   console.log(index);
      if (sort == "subject") {
        subjectIndex.value = index;
      } else {
        priceIndex.value = index;
      }
    };
    provide("showPopup", showPopup);
    return {
      show,
      subjectIndex,
      priceIndex,
      handleActive,
    };
  },
};
</script>

<style lang="less" scoped>
.openClass_box {
  width: 100%;
  height: 100%;
  padding: 2.5rem 0;
  box-sizing: border-box;
  .content_box {
    width: 100%;
    // height: 100%;
    // overflow: hidden;
    // padding: 0 0.5rem;
    // box-sizing: border-box;
  }
}
.popup_content {
  height: 100%;
  padding: 0 0.5rem;
  box-sizing: border-box;
  .subject_box,
  .price_box {
    .title {
      height: 2rem;
      line-height: 2rem;
      font-size: 1.15rem;
      font-weight: bold;
      letter-spacing: 0.25rem;
    }
    .list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .item {
        background-color: #f7f7f7;
        width: 5rem;
        height: 3.2rem;
        border-radius: 0.3rem;
        padding: 0.5rem;
        box-sizing: border-box;
        font-size: 0.88rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0.5rem 0;
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          word-break: break-all;
        }
      }
      .active {
        color: red;
        font-weight: bold;
        background: rgb(255 234 232);
        border: 1px solid red;
        width: 5rem;
        height: 3.2rem;
        border-radius: 0.3rem;
        padding: 0.5rem;
        box-sizing: border-box;
        font-size: 0.88rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0.5rem 0;
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          word-break: break-all;
        }
      }
    }
  }
  .subject_box {
    padding: 1rem 0;
  }
  .button_box {
    width: 100%;
    height: 4rem;
    position: fixed;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 0 5px -1px #9e9e9e;
    .left,
    .right {
      padding: 0.35rem 2rem;
      border-radius: 1rem;
      font-size: 1rem;
      letter-spacing: 0.5rem;
    }
    .left {
      color: red;
      background: rgb(255 234 232);
    }
    .right {
      color: white;
      background-image: linear-gradient(to top right, #f69f9f, red);
    }
  }
}
</style>
